<template>
  <div v-loading="showLoading">
    <div
      class="result-title"
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <!-- summaryType string 可选
      匹配历史结果页筛选类型：Recommend->系统匹配，Collect->个人筛选，Credit->征信匹配，Customer->客服匹配
      recommendType integer 可选 推荐类型：0->不推荐；1->推荐 -->
      <div style="display: flex">
        <div
          :class="
            summaryType == 'Recommend'
              ? 'Matchingcolorblod'
              : summaryType == 'Collect'
              ? 'Matchingcolorblod'
              : 'Matchingcolor'
          "
          @click="Matching('Recommend')"
        >
          系统匹配
        </div>
        <div
          :class="
            summaryType == 'Credit' ? 'Matchingcolorblod' : 'Matchingcolor'
          "
          @click="Matching('Credit')"
        >
          征信匹配
        </div>
        <div
          :class="
            summaryType == 'Customer' ? 'Matchingcolorblod' : 'Matchingcolor'
          "
          @click="Matching('Customer')"
        >
          客服匹配
        </div>
      </div>
      <div
        @click="Matchong(0)"
        :class="recommendType == '0' ? 'Matchingcolorblod' : 'Matchingcolor'"
      >
        系统不推荐产品结果
      </div>
    </div>
    <div
      class="result-title"
      v-if="summaryType == 'Recommend' || summaryType == 'Collect'"
      style="display: flex; margin-top: 15px"
    >
      <div
        @click="Matchongone(1, 'Recommend')"
        :class="recommendType == 1 ? 'Matchingcolorblod' : 'Matchingcolor'"
      >
        &nbsp;&nbsp;&nbsp; 匹配结果 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      </div>
      <div
        :class="
          summaryType == 'Collect' ? 'Matchingcolorblod' : 'Matchingcolor'
        "
        @click="Matching('Collect')"
      >
        用户自筛结果
      </div>
    </div>
    <div class="product-box" v-if="productList">
      <el-table :data="recommendedProducts" border>
        <el-table-column width="350" label="产品名称">
          <template slot-scope="scope">
            <div class="productNameStyle">
              <div class="image">
                <el-image
                  style="width: 80px; height: 80px"
                  :src="scope.row.productPic"
                  :preview-src-list="[scope.row.productPic]"
                >
                </el-image>
              </div>
              <div class="name-msg">
                <div style="color: #222; font-weight: bold">
                  {{ scope.row.productName }}
                </div>
                <div style="color: #999">ID: {{ scope.row.productId }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="产品所属银行">
          <template slot-scope="scope">
            <span>{{ scope.row.bankName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="额度区间">
          <template slot-scope="scope">
            <span
              >{{ scope.row.productMinQuota }}万 -
              {{ scope.row.productMaxQuota }}万</span
            >
          </template>
        </el-table-column>
        <el-table-column label="可贷额度">
          <template slot-scope="scope">
            <el-input-number
              class="my-el-input-number"
              v-if="!flagValue"
              v-model="scope.row.quota"
              controls-position="right"
              @change="handleChange($event, scope.row)"
              :min="0"
              :max="scope.row.productMaxQuota"
            >
            </el-input-number>
            <span v-if="flagValue">{{ scope.row.quota }}万</span>
          </template>
        </el-table-column>

        <el-table-column v-if="!flagValue" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="goProductDetails(scope.row.productId)"
              >详情</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="产品备注(可填写)">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.note"
              @blur="remark(scope.row.id, scope.row.note)"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="pageRight"
        :current-page.sync="currentPage"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="pageDate.pageSize"
        layout="total,sizes, prev, pager, next"
        :total="pageDate.total"
        :page-count="pageDate.pageCount"
      >
      </el-pagination>
      <!-- 系统不推荐产品结果 -->
      <!-- <div class="result-title">
        <div style="margin: 20px 0px">系统不推荐产品结果</div>
        <span>勾选或添加适合客户的产品</span>
      </div> -->
      <!-- <el-table :data="NonRecommendedProducts" border>
        <el-table-column width="350" label="产品名称">
          <template slot-scope="scope">
            <div class="productNameStyle">
              <div class="image">
                <el-image
                  style="width: 80px; height: 80px"
                  :src="scope.row.productPic"
                  :preview-src-list="[scope.row.productPic]"
                >
                </el-image>
              </div>
              <div class="name-msg">
                <div style="color: #222; font-weight: bold">
                  {{ scope.row.productName }}
                </div>
                <div style="color: #999">ID: {{ scope.row.productId }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="产品所属银行">
          <template slot-scope="scope">
            <span>{{ scope.row.bankName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="额度区间">
          <template slot-scope="scope">
            <span
              >{{ scope.row.productMinQuota }}万 -
              {{ scope.row.productMaxQuota }}万</span
            >
          </template>
        </el-table-column>
        <el-table-column label="不推荐原因">
          <template slot-scope="scope">
            <span>{{ scope.row.reason }}</span>
          </template>
        </el-table-column>

        <el-table-column v-if="!flagValue" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="goProductDetails(scope.row.productId)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table> -->
      <!-- <el-pagination
        @size-change="nonHandleSizeChange"
        @current-change="nonHhandleCurrentChange"
        class="pageRight"
        :current-page.sync="noCurrentPage"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="noPageDate.pageSize"
        layout="total,sizes, prev, pager, next"
        :total="noPageDate.total"
        :page-count="noPageDate.pageCount"
      >
      </el-pagination> -->
    </div>
  </div>
</template>
<script>
// import { getBankList } from "@/api/system";
import { saveAloneQuota } from "@/api/customer";
import {
  getProjectList,
  getBankProductList,
  getProjectdetailsList,
  postremark,
  getnotRecommendListList,
} from "@/api/product";
export default {
  name: "developPlan",
  props: {
    detailInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
    searchType: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      summaryType: "Recommend",
      recommendType: 1,
      index: 1,
      pageMatching: [
        {
          Matching: 1,
          text: "系统匹配",
        },
        {
          Matching: 1,
          text: "征信匹配",
        },
        {
          Matching: 0,
          text: "客服匹配",
        },
      ],

      // bankList: [],
      recommendedProducts: [],
      NonRecommendedProducts: [],
      bankId: "",
      productId: "",
      productList: [],
      selectProduct: [],
      errRes: "",
      flagValue: false,
      showLoading: false,
      currentPage: 1,
      noCurrentPage: 1,
      pageDate: {
        pageNum: 1,
        pageSize: 5,
      },
      noPageDate: {
        pageNum: 1,
        pageSize: 5,
      },
    };
  },
  created() {
    this.getProjectList(this.index);
    let flagValue = this.$route.path;
    if (flagValue == "/customerMatch") {
      this.flagValue = true;
    }
    console.log("flagValue", flagValue);
  },
  watch: {
    bankId: {
      handler(newVal, oldVal) {
        if (newVal && newVal != oldVal) {
          this.productId = "";
          this.selectProduct = [];
          this.getBankProductList(newVal);
        } else {
          this.productId = "";
          this.selectProduct = [];
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 备注
    remark(rowid, remark) {
      var obj = {
        id: rowid,
        note: remark,
      };
      postremark(obj).then((res) => {});
    },
    Matching(e) {
      if (e == "Recommend"||e == "Credit"||e == "Customer"||e == "Collect") {
        this.recommendType = 1;
      } else {
        this.recommendType = "";
      }
      this.summaryType = e;
      this.pageDate.pageNum = 1;
      this.getProjectList();
    },
    Matchong(e) {
      if (e == 0) {
        this.summaryType = "";
      }
      this.recommendType = e;
      this.pageDate.pageNum = 1;
      this.getProjectList();
    },
    Matchongone(e, i) {
      this.recommendType = e;
      this.summaryType = i;
      this.pageDate.pageNum = 1;
      this.getProjectList();
    },
    handleSizeChange(val) {
      this.pageDate.pageSize = val;
      this.getProjectList();
    },
    handleCurrentChange(val) {
      this.pageDate.pageNum = val;
      this.getProjectList();
    },
    // nonHandleSizeChange(val) {
    //   this.noPageDate.pageSize = val;
    //   this.getProjectList();
    // },
    // nonHhandleCurrentChange(val) {
    //   this.noPageDate.pageNum = val;
    //   this.getProjectList();
    // },
    getBankProductList(id) {
      getBankProductList({
        bankId: id,
        publishStatus: 1,
      }).then((res) => {
        this.selectProduct = res.data ? res.data : [];
      });
    },
    goProductDetails(idx) {
      let routeData = this.$router.resolve({
        path: "/productDetail", // path 要跳转的路由地址
        // query 要传递的参数
        query: {
          id: idx,
        },
      });
      window.open(routeData.href, "_blank");
    },

    // console.log(idx);
    // this.productList.splice(idx, 1);
    // },

    getProjectList(Type) {
      // console.log(Type);

      // const stepMaping = {
      //   14: 1,
      //   15: 2,
      //   2: 1,
      //   4: 1,
      //   9: 1,
      //   7: 1,
      //   5: 2,
      //   10: 2,
      //   11: 2,
      //   13: 2,
      //   12: 3,
      // };
      // console.log(
      //   this.detailInfo.matchStep,
      //   stepMaping[this.detailInfo.matchStatus],
      //   "kkkk",
      //   this.searchType,
      //   "type"
      // );
      // return
      this.showLoading = true;
      // let params = {
      //   matchType: this.detailInfo.matchType,
      //   matchId: this.detailInfo.id,
      //   matchStep:
      //     this.searchType == 0
      //       ? this.detailInfo.matchStep
      //       : stepMaping[this.detailInfo.matchStatus],
      //   // matchStep: stepMaping[this.detailInfo.matchStatus],
      //   recommendType: Type,
      //   ...this.pageDate,
      // };
      // let noParams = {
      //   matchType: this.detailInfo.matchType,
      //   matchId: this.detailInfo.id,
      //   // matchStep: stepMaping[this.detailInfo.matchStatus],
      //   matchStep: this.searchType == 0 ? this.detailInfo.matchStep: stepMaping[this.detailInfo.matchStatus],
      //   recommendType: "0",
      //   ...this.noPageDate
      // };
      // getProjectList(params).then((res) => {
      //   this.recommendedProducts = res.data.list;
      //   this.pageDate.pageSize = res.data.pageSize;
      //   this.pageDate.total = res.data.total;
      //   this.currentPage = res.data.pageNum;
      // });
      // getProjectList(noParams).then(res => {
      //   this.NonRecommendedProducts = res.data.list;
      //   this.noPageDate.pageSize = res.data.pageSize;
      //   this.noPageDate.total = res.data.total;
      //   this.noCurrentPage = res.data.pageNum;
      // });
      // 单个不推建产品
      if (this.recommendType == "0") {
        let params = {
          id: this.detailInfo.id,
          type: this.detailInfo.matchType,
          pageNum: this.pageDate.pageNum,
          pageSize: this.pageDate.pageSize,
        };
        getnotRecommendListList(params).then((res) => {
          this.recommendedProducts = res.data.list;
          // this.pageDate.pageSize = res.data.pageSize;
          this.pageDate.total = res.data.total;
          // this.currentPage = res.data.pageNum;
        });
      } else {
        // 修改后接口
        let params = {
          id: this.detailInfo.id,
          type: this.detailInfo.matchType,
          // 匹配历史结果页筛选类型：Recommend->系统匹配，Collect->个人筛选，Credit->征信匹配，Customer->客服匹配
          summaryType: this.summaryType,
          recommendType: this.recommendType,
          // 推荐类型：0->不推荐；1->推荐
          ...this.pageDate,
        };
        getProjectdetailsList(params).then((res) => {
          this.recommendedProducts = res.data.list;
          this.pageDate.pageSize = res.data.pageSize;
          this.pageDate.total = res.data.total;
          this.currentPage = res.data.pageNum;
        });
      }

      setTimeout(() => {
        this.showLoading = false;
      }, 2000);
    },
    resetProduct() {},
    addProduct() {
      if (this.productId) {
        const obj = this.selectProduct.find((v) => {
          return v.id === this.productId;
        });
        console.log(obj);

        const idx = this.productList.findIndex((v) => {
          return v.id === obj.id;
        });
        if (idx === -1) {
          this.productList.push(obj);
        } else {
          this.$message({
            message: "该产品已添加",
            type: "warning",
          });
        }
      }
    },
    // getBankList() {
    //   getBankList().then(res => {
    //     this.bankList = res.data;
    //   });
    // },
    handleChange(value, v) {
      let params = {
        id: v.id,
        quota: value,
      };
      saveAloneQuota(params).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>

<style scoped lang="scss">
.Matchingcolorblod {
  margin-right: 40px;
  font-size: 15px !important;
  font-weight: bold !important;
}
.Matchingcolor {
  font-size: 15px !important;
  margin-right: 40px;
  font-weight: 400;
}
.Matchingcolor:hover {
  font-size: 15px !important;
  font-weight: bold !important;
}
.my-el-input-number {
  position: relative;
}

.my-el-input-number::after {
  content: "万";
  display: inline-block;
  height: 20px;
  line-height: 20px;
  width: 20px;
  text-align: center;
  position: absolute;
  right: 45px;
  top: 50%;
  transform: translateY(-50%);
}

.my-el-input-number .el-input__inner {
  // 不加这行的话，当文本框里数值很大时，会和单位重叠
  padding-left: 30px;
  padding-right: 48px;
}

.result-title {
  display: flex;
  align-items: center;

  span,
  div {
    font-weight: 500;
    font-size: 18px;
    color: #222222;
    line-height: 25px;
  }
}

.product-box {
  margin-top: 20px;
}

.err-res {
  width: 100%;
  margin-top: 20px;
  display: flex;
}

.selete-product {
  display: flex;
  align-items: center;
  margin-top: 20px;

  .select-bank {
    display: flex;
    align-items: center;
    margin-right: 30px;
  }
}

.productNameStyle {
  display: flex;
  height: 100px;

  .image {
    width: 100px;
    height: 100px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .name-msg {
    margin-left: 10px;
    padding: 10px 0;
    height: 80px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
}
</style>
